<template>
	<jn-page>
		<view class="my-box">
			<view class="" style="background-image: linear-gradient(to left top, #ec008c, #f43f3b);">
				<u-navbar :is-back="false" title=" " :border-bottom="false" :background="background" :is-fixed="false">
					<view class="u-flex u-m-l-22">
						<button style="background-color: transparent;padding: 0;border: none;" open-type="contact"><u-icon name="chat" color="#fff" size="38" :custom-style="{ padding: '16rpx' }"></u-icon></button>
					</view>
				</u-navbar>
				<!-- 用户 -->
				<view class="user-panel-box">
					<!-- 未登录 -->
					<view v-if="!vuex_user.hasLogin" class="u-flex">
						<view class="u-m-r-20">
							<u-avatar size="120"></u-avatar>
						</view>
						<view class="u-flex-1">
							<button class="jn-btn u-font-lg" @click="wxauth()">登录 / 注册</button>
						</view>
						<view>
							<!-- <u-icon name="arrow-right" color="#969799" size="28"></u-icon> -->
						</view>
					</view>
					<!-- 已登录 -->
					<view v-if="vuex_user.hasLogin" class="u-flex">
						<view class="u-m-r-20">
							<u-avatar :src="vuex_user.userinfo.avatarUrl" mode="circle" size="120"></u-avatar>
						</view>
						<view class="u-flex-1">
							<view class="u-font-lg">{{vuex_user.userinfo.nickName}}</view>
							<view class="u-m-t-10">
								<u-tag v-for="(item, index) in personalData.list.model.user.userTag" :key="index" :text="item" mode="plain"
								 type="info" size="mini" class="u-m-r-10" />
							</view>
						</view>
						<view>
							<!-- <u-icon name="arrow-right" color="#969799" size="28"></u-icon> -->
						</view>
					</view>
				</view>

				<!-- 跟踪 -->
				<view class="trace-panel-box">
					<u-grid :col="3" :border="false" class="card-main">
						<u-grid-item bg-color="transparent" @click="AllteamTab">
							<view class="u-font-xl">{{userdata.child_all_count }}</view>
							<view class="u-font-xs u-m-t-10">全部成员</view>
						</u-grid-item>
						<u-grid-item bg-color="transparent" @click="DUteamTab">
							<view class="u-font-xl">{{ userdata.child_child_user_count }}</view>
							<view class="u-font-xs u-m-t-10">直属成员</view>
						</u-grid-item>
						<u-grid-item bg-color="transparent" @click="NoDUteamTab">
							<view class="u-font-xl">{{ userdata.child_user_count }}</view>
							<view class="u-font-xs u-m-t-10">非直属成员</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<!-- 钱包 -->
			<view class="card-box">
				<u-grid :col="4" :border="false">
					<u-grid-item>
						<view class="u-font-xl">{{ userdata.cps_profit_sum }}</view>
						<view class="u-font-xs u-m-t-10">待结算佣金</view>
					</u-grid-item>
					<u-grid-item>
						<view class="u-font-xl">{{ userdata.total_money }}</view>
						<view class="u-font-xs u-m-t-10">累计提现</view>
					</u-grid-item>
					<u-grid-item>
						<view class="u-font-xl">{{ userdata.money }}</view>
						<view class="u-font-xs u-m-t-10">余额</view>
					</u-grid-item>
					<u-grid-item class="all-order" @click="walletTab">
						<image class="cut-off-line" src="/static/user/cut_off_line.png" mode=""></image>
						<u-icon name="order" label="我的钱包" size="48" label-size="22" margin-top="14" label-pos="bottom"></u-icon>
					</u-grid-item>
				</u-grid>
			</view>
			
			<!-- AD -->
			<view class="ad-box" @click="adTab">
				<u-image src="https://wmsq.oss-cn-hangzhou.aliyuncs.com/56.png" border-radius="15" mode="widthFix"></u-image>
			</view>
			<!-- 订单 -->
			<view class="panel-box">
				<view class="panel-header">
					<u-section title="我的订单" sub-title="查看全部订单" :bold="false" :show-line="false" @click="allorderTab"></u-section>
				</view>
				<u-grid :col="5" :border="false" class="panel-main">
					<u-grid-item @click="UnsettledTab">
						<u-icon name="order" label="待结算" size="48" label-size="22" margin-top="14" label-pos="bottom"></u-icon>
					</u-grid-item>
					<u-grid-item @click="SettledTab">
						<u-icon name="order" label="已结算" size="48" label-size="22" margin-top="14" label-pos="bottom"></u-icon>
					</u-grid-item>
				</u-grid>
			</view>

			<u-gap height="20"></u-gap>

			<!-- 其它 -->
			<view class="other-panel-box">
				<u-cell-group :border="personalData.list.border">
					<view class="panel-main">
						<u-cell-item :title="item.title" :value="item.value" @click="openPage(item.path)" :border-bottom="personalData.list.borderBottom"
						 v-for="(item, index) in personalData.cells" :key="index"></u-cell-item>
					</view>
				</u-cell-group>
			</view>

			<u-gap height="40"></u-gap>
		</view>
		<u-modal v-model="show" ref="uModal" :show-title="false" :show-confirm-button="false" :show-cancel-button="false" :async-close="true">
			<slot name="confirm-button">
				<view class="u-m-30">
					<view class="jn-modal-content">
						<view class="jn-avatar">
							<open-data type="userAvatarUrl"></open-data>
						</view>
						<view class="jn-nickname">
							<open-data type="userNickName"></open-data>
						</view>
					</view>
					<view class="jn-model-foot">
						<u-button class="jn-model-btn" type="error" shape="circle" @click="wxauth()">小程序登录</u-button>
						<view class="jn-model-can" @click="btncancel">暂不登录</view>
						<view class="text">
							<text>登录即同意我们的《用户协议》</text>
						</view>
					</view>
				</view>
			</slot>
		</u-modal>
	</jn-page>
</template>

<script>
	import _personal_data from '@/test/data/personal.js';
	export default {
		data() {
			return {
				userdata: {
					child_all_count: 0,
					child_child_user_count: 0,
					child_user_count: 0,
					cps_profit_sum: "0.00",
					money: "0.00",
					total_money: "0.00",
				},
				background: {
					backgroundColor: 'transparent'
				},
				personalData: [],
				show: false
			};
		},
		onLoad() {
			this.getPersonalData();
		},
		onShow() {
			this.checklogin();
		},
		onPageScroll() {

		},
		methods: {
			
			checklogin() {
				if (!this.vuex_user.hasLogin) {
					this.show = true;
				} else {
					this.getuserdata();
					this.get_cpsconfig();
				}
			},
			getuserdata() {
				this.$u.get('/wxapi/getUserData').then(res => {
					console.log(res);
					if (res.code == 200) {
						this.userdata = res.data;
					} else if (res.code == 999) {
						this.$u.toast('登陆操时');
					}
					return false;
				});
			},
			get_cpsconfig() {
				this.$u
					.get('/wxapi/config')
					.then(res => {
						if (res.code == 999) {
							this.$u.toast(res.info);
							this.$u.vuex('vuex_user.hasLogin', false);
						}
						this.couponList = res.data.cpslist;
						this.list = res.data.slider;
					});
			},
			
			wxauth(){
				var _that = this;
				uni.login({
					provider: 'weixin',
					success: res => {
						_that.$u.vuex('vuex_user.logincode', res.code);
					},
					fail: err => {
						console.error('授权登录失败：' + JSON.stringify(err));
					}
				});
				uni.getUserProfile({
					desc: 'weixin',
					success: infoRes => {
						_that.$u.vuex('vuex_user.userinfo', infoRes.userInfo);
						uni.getSetting({
							success(res) {
								if (res.authSetting['scope.userInfo']) {
									_that.$u.post('/wxapi/wxlogin', {
											code: _that.vuex_user.logincode,
											userinfo: _that.vuex_user.userinfo,
											fromid:_that.vuex_user.fromid
										})
										.then(res => {
											console.log(res);
											_that.$u.toast(res.info);
											if (res.code == 200) {
												_that.$u.vuex('vuex_user.userId', res.data.id);
												_that.$u.vuex('vuex_user.hasLogin', true);
												_that.$u.vuex('vuex_token.accessToken', res.data.token);
												_that.$u.vuex('vuex_token.refreshToken', res.data.expire);
												_that.get_cpsconfig();
												_that.show = false;
											} else {
											}
											return false;
										});
								}
							}
						});
					},
					fail(res) {
						console.log(res)
						uni.showToast({
							icon: 'none',
							title: '登陆失败'
						});
					}
				});
			},
			btncancel(){
				this.show = false;
			},
			
			openPage(path) {
				this.$u.route({
					url: '/pages/' + path
				});
			},
			getPersonalData() {
				this.personalData = _personal_data;
			},
			//全部订单
			allorderTab() {
				this.$u.route({
					url: '/pages/order/order',
					params: {
						current: 0
					}
				});
			},
			//待结算订单
			UnsettledTab() {
				this.$u.route({
					url: '/pages/order/order',
					params: {
						current: 1
					}
				});
			},
			//已结算订单
			SettledTab() {
				this.$u.route({
					url: '/pages/order/order',
					params: {
						current: 2
					}
				});
			},
			//全部成员
			AllteamTab() {
				this.$u.route({
					url: '/pages/team/team',
					params: {
						current: 0
					}
				});
			},
			//直属成员
			DUteamTab() {
				this.$u.route({
					url: '/pages/team/team',
					params: {
						current: 1
					}
				});
			},
			////非直属成员
			NoDUteamTab() {
				this.$u.route({
					url: '/pages/team/team',
					params: {
						current: 2
					}
				});
			},
			adTab(){
				this.$u.route({
					url: '/pages/revenue/revenue'
				});
			},
			walletTab() {
				this.$u.route({
					url: '/pages/wallet/wallet'
				});
			}

		}
	};
</script>

<style lang="scss" scoped>
	.jn-btn {
		background-color: transparent;
		padding: 0;
		text-align: left;
		color: #FFFFFF;
	}
	button::after {
		border: none;
	}
	.jn-modal-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: auto;
		.jn-avatar {
			overflow:hidden;
			display: block;
			width: 130rpx;
			height: 130rpx;
			margin: 20rpx;
			margin-top: 50rpx;
			border-radius: 50%;
			border: 4rpx solid #fff;
			box-shadow: 6rpx 6rpx 20rpx rgba(0, 0, 0, 0.2);
		}
	}
	.jn-model-foot {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 30rpx;
		width: 100%;
		.jn-model-btn {
			margin: 15rpx 0;
			width: 100%;
		}
		.jn-model-can {
			padding: 20rpx 0;
		}
		.text {
			font-size: 24rpx;
			color:#a8a8a8;
		}
	}
	.my-box {
		.user-panel-box {
			background-color: transparent;
			padding: 40rpx 30rpx 0 30rpx;
			color: #ffffff;
		}

		.trace-panel-box {
			background-color: transparent;
			padding: 0 10rpx 30rpx 10rpx;
			color: #ffffff;
		}
		
		.ad-box {
			position: relative;
			top: -20rpx;
			margin: 0 30rpx;
		}

		.panel-box {
			background-color: #ffffff;

			.panel-header {
				padding: 30rpx 32rpx 20rpx 32rpx;
				border-bottom: 1rpx solid $jn-border-color-light;
			}

			.panel-main {
				padding: 10rpx 0;
			}
		}

		.card-box {
			padding: 16rpx 0;
			background-color: #ffffff;
			border-radius: 10px 10px 0 0;
			position: relative;
			bottom: 20px;
			
			.all-order {
				position: relative;
			
				.cut-off-line {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 0rpx;
					width: 30rpx;
					height: 160rpx;
				}
			}
		}

		.other-panel-box {
			.panel-main {
				padding: 10rpx 0;
			}
		}
	}
</style>
